<template>
  <div class="app-container">
    <div class="pay">
      <h2>
        <img src="@/assets/image/logo-alipay.png" alt="" height="32" class="pull-left" style="margin-right:5px;">
        支付宝支付
        <div class="pay-time"> 请在 <span>60</span> 秒内完成支付</div>
      </h2>
      <div class="pay-body">
        <div class="pay-order">
          <p>订单标题：<em>{{body}}</em></p>
          <p>订单编号：<em>{{outTradeNo}}</em></p>
          <p>订单价格：<em class="wechat-price">￥{{totalFee}}</em> 元</p>
        </div>
        <div class="pay-qrcode">
          <div id="images"></div>
          <div class="expired hidden"></div>
          <div class="paid hidden"></div>
        </div>
        <div class="pay-tips">
          <p>请使用支付宝扫一扫<br>扫描二维码支付</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  name: "qrcode",
  components: { QRCode },
  data(){
    return {
      text : '',
      payData: '',
      body: '',
      outTradeNo: '',
      totalFee : ''
    }
  },
  mounted() {
    this.text = this.$route.query.text;

    this.images = new QRCode('images',{
      width: 300,
      height: 300,
      text: this.text,
    })
  }
}
</script>

<style scoped>
  html,
  body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f4f6f8;
    font-size: 14px;
    color: #616161;
  }
  .app-container {
    max-width: 850px;
    margin: 0 auto;
    padding: 50px;
  }
  .pay {
    margin-top: 30px;
  }
  .pay h2 {
    margin: 0 0 15px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    position: relative;
  }
  .pay-body {
  }
  .pay-qrcode {
    margin-bottom: 20px;
    position: relative;
  }
  .pay-qrcode img {
    width: 100%;
    border: 1px solid #eee;
  }
  .pay-qrcode .expired {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .95;
    background: #fff url(../../../assets/image/expired.png) center center no-repeat;
  }

  .pay-qrcode .paid {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .95;
    background: #fff url(../../../assets/image/paid.png) center center no-repeat;
  }
  .pay-scan {
    padding: 0;
  }

  .pay-scan img {
    width: 100%;
  }

  .pay-tips {
    height: 60px;
    padding: 8px 0 8px 125px;
    background: #00c800 url(../../../assets/image/scan.png) 50px 12px no-repeat;
    background-size: 36px 36px;
  }

  .pay-tips p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #fff;
    font-weight: 700
  }

  .pay-time {
    font-size: 14px;
    margin-bottom: 15px;
    position: absolute;
    top: 15px;
    right: 10px;
    font-weight: normal;
    display: none;
  }
  .pay-time span {
    color: red;
  }

  .pay-order {
    margin-bottom: 5px;
  }

  .pay-order em {
    font-style: normal;
    color: #666;
  }

  .pay-order em.pay-price {
    color: #ff3333;
    font-weight: bold;
  }
  @media (max-width: 767px) {
    .pay {
      margin-top: 20px;
    }
  }
  .hidden{
    display: none;
  }
</style>
